<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<head>
    <style type="text/css">
        .mechanics {

        }
        .automation {
            display:none;
        }
    </style>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<!--参与部门  模态框-->
<div class="modal fade" id="modal-canYuRen-select">
    <div class="modal-dialog" style="width:800px;height: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择部门</h4>
            </div>
            <div class="modal-body">
                <form id="branchForm">
                    <div>
                        <button type="button" style="margin-bottom: 5px" class="btn btn-info pull-left"
                                id="btn-submit-CanYuRen1">添加
                        </button>
                        <table class="table table-bordered" id="bootstrap-table1"></table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <span style="font-size: 24px" id="h3-drawNo"></span>&emsp;&emsp;
        <span style="font-size: 24px" id="h3-drawName"></span>
        <a id="btn-save" shiro:hasPermission="asseOrd:est:edit" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px">
            <span class="Bold">确定</span>
        </a>
    </div>
    <form id="sheetForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-11" style="margin-left: 4%;">
                <input id="deptId" name="deptId" placeholder="参与科室id" type="hidden" >

                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td colspan="9">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="3">装配派工单</td>
                        <td style="width: 3.3%"></td>
                    </tr>
                    <tr>
                        <td style="width: 6%">生产令号</td>
                        <td style="width: 11%">
                            <select id="prodNo" class="form-control" name="prodNo"></select>
                        </td>
                        <td style="width: 7.3%">项目名称</td>
                        <td colspan="2">
                            <input id="proCode" name="proCode" type="hidden">
                            <input id="proUnit" name="proUnit" type="hidden">
                            <input id="proName" type="text" class="form-control" name="proName" readonly>
                        </td>
                        <td style="width: 6%">订单数量</td>
                        <td style="width: 7%">
                            <input id="proNum" type="text" class="form-control" name="proNum" readonly>
                        </td>
                        <td style="width: 9.1%">类型</td>
                        <td style="width: 6.9%">
                            <select id="special" class="form-control" name="special" style="padding-left: 5px;">
                                <option value="">请选择</option>
                                <option value="机械">机械</option>
                                <option value="流体">流体</option>
                                <!--<option value="自动化">自动化</option>-->
                            </select>
                        </td>
                        <td style="width: 7.9%">部分</td>
                        <td style="width: 9.8%" colspan="2">
                            <select id="partId" class="form-control" name="partId">
                                <option value="">请选择</option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td rowspan="2">装配图号</td>
                        <td colspan="2" rowspan="2">
                            <select id="drawNoSelect" class="form-control select2" name="drawNoSelect">
                                <option value="">请选择</option>
                            </select>
                            <input id="drawNo" type="hidden" name="drawNo">
                        </td>
                        <td rowspan="2" style="width: 6%">装配名称</td>
                        <td colspan="3" rowspan="2">
                            <input id="drawName" type="text" class="form-control" name="drawName" readonly>
                        </td>
                        <td>装配数量</td>
                        <td>
                            <input id="drawNum" type="number" step="0.1" class="form-control" name="drawNum">
                        </td>
                        <td rowspan="2">要求完成时间</td>
                        <td colspan="2" rowspan="2">
                            <input id="compTime" type="text" class="form-control" name="compTime"
                                   autocomplete="off">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>重量Kg</td>
                        <td>
                            <input id="drawWeight" type="number" step="0.1" class="form-control" name="drawWeight">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                           部门
                        </td>
                        <td colspan="11" style="text-align: left;padding-right: 5px;">
                            <span class="out-add" title="添加" style="text-align: right;margin-left: 20px"><i
                                    class="fa fa-plus text-green"></i></span>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>路线</td>
                        <td>序号</td>
                        <td>工序</td>
                        <td colspan="9">工艺内容</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="card">
                    <tr class="mechanics">
                        <td>
                            <select class="form-control" name="route" title="">
                                <option th:each="r : ${routes}" th:value="${r.name}"
                                        th:text="${r.name}"></option>
                            </select>
                        </td>
                        <td>
                            <input type="number" step="1" class="form-control" name="orderNo" autocomplete="off">
                        </td>
                        <td>
                            <select class="form-control" name="process" title="">
                                <option th:each="p : ${processes}" th:value="${p.name}"
                                        th:text="${p.name}"></option>
                            </select>
                        </td>
                        <td colspan="9">
                            <textarea class="form-control" name="comment" rows="1"></textarea>
                        </td>
                        <td>
                            <span class="sheet-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="sheet-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    <tr class="mechanics">
                        <td>
                            <select class="form-control" name="route" title="">
                                <option th:each="r : ${routes}" th:value="${r.name}"
                                        th:text="${r.name}" th:selected="${r.name=='转储'}"></option>
                            </select>
                        </td>
                        <td>
                            <input type="number" step="0.1" class="form-control" name="orderNo" autocomplete="off">
                        </td>
                        <td>
                            <select class="form-control" name="process" title="">
                                <option th:each="p : ${processes}" th:value="${p.name}"
                                        th:text="${p.name}" th:selected="${p.name=='成品'}"></option>
                            </select>
                        </td>
                        <td colspan="9">
                            <textarea class="form-control" name="comment" rows="1"></textarea>
                        </td>
                        <td>
                            <span class="sheet-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="sheet-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    <tr class="automation">
                        <td>注<br>意<br>事<br>项</td>
                        <td colspan="11">
                            <textarea class="form-control" name="remark" rows="20"></textarea>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-11" style="font-size: 14px;line-height: 200%;margin-left: 4%;">
                <div class="col-xs-3" style="padding-left: 0">提报人：[[${session.user.name}]]</div>
                <div class="col-xs-3 bottom form-inline">联系电话：
                    <input id="createTel" class="form-control" style="width:60%;border: none;border-bottom: 1px solid #000;"
                           type="text" name="createTel">
                </div>
            </div>
        </div>
    </form>

</section>
<div id="div-route" style="display: none">
    <select class="form-control" name="route" title="">
        <option th:each="r : ${routes}" th:value="${r.name}"
                th:text="${r.name}"></option>
    </select>
</div>
<div id="div-process" style="display: none">
    <select class="form-control" name="process" title="">
        <option th:each="p : ${processes}" th:value="${p.name}"
                th:text="${p.name}"></option>
    </select>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table1;
    var xinZeng = "xinZeng";
    var canYuCount = 0; //每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了部门

    /** 获取部分 */
    function getPart() {
        let code = $("#proCode").val();
        let type = $("#special").val();
        switch (type) {
            case '机械' :
            case '流体' :
            case '自动化' :
                fetchPart(code, type);
                break;
            case '外观' :
                fetchPart(code, null);
                break;
        }
    }

    /** 获取部分 */
    function fetchPart(code, type) {
        js.get({
            url: ctx + 'assemble/dispatch/partList',
            data: {
                code : code,
                type : type
            },
            success: function (result) {
                $("#partId").empty().append(`<option value="">请选择</option>`);
                result.forEach(value => {
                    if (value) {
                        $("#partId").append(`<option value="${value.id}">${value.special}-${value.proPart}</option>`);
                    }
                })
            }
        })
    }

    /** 清空零件信息 */
    function emptyComp() {
        $("#drawNo").val('');
        $("#drawName").val('');
        $("#drawNum").val('');
        $("#drawWeight").val('');
    }

    /**
     *全选
     */
    function selectedAll() {
        if ($('.checkboxAll').is(":checked")) {
            $('.checkbox_select').each(function () {
                this.checked = true;
            });
        } else {
            $('.checkbox_select').each(function () {
                this.checked = false;
            });
        }
    }
    /**
     * @Description: 添加部门
     * @Author: wsg
     **/
    function add(a1, a2) {
        var xinZengClass = xinZeng + a1;
        //参与人后添加 人名和叉号
        $(".out-add").before(`
              <span id="` + xinZengClass + `">&nbsp;&nbsp;&nbsp;` + a2 + `<span class="out-del" title="删除" ><i class="fa fa-remove text-red"></i> </span></span>
            `);
        //隐藏input框填 科室id  用 ，分隔
        var branchId = a1;
        var temp1 = $("#deptId").val();
        var temp2 = temp1 + "," + branchId;
        if (temp1 === null || temp1 === "" || temp1 === undefined) {
            $("#deptId").val(temp2.slice(1));
        } else {
            $("#deptId").val(temp2);
        }
        js.modal.hide("modal-canYuRen-select")
        canYuCount++; //每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了部门
    }


    $(function () {
        let routeHtml = $("#div-route").html();
        let processHtml = $("#div-process").html();

        /**增加参与部门*/
        $('#sheetForm').on('click', '.out-add', function () {
            js.modal.open("modal-canYuRen-select");
            loadDepts();
        });

        /**移除参与部门*/
        $('#sheetForm').on('click', '.out-del', function () {
            //找到要删除的人的 父级 span  id
            var canYuBranchId = $(this).parent().attr('id');
            //删除人名 span
            $("#" + canYuBranchId).remove();

            //删除隐藏input中 branchid
            var delCanYuBranchId = canYuBranchId.slice(7);
            var idValue = $("#deptId").val();
            var BranchIdList = idValue.split(",");
            for (let i = 0; i < BranchIdList.length; i++) {
                if (BranchIdList[i] === delCanYuBranchId) {
                    BranchIdList.splice(i, 1);
                }
            }
            $("#deptId").val(BranchIdList.toString());
            canYuCount--;//每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了参与部门
        });

        function loadDepts() {
            /** 加载科长表格 */
            table1 = js.table.init({
                id: "bootstrap-table1",
                url: ctx + 'assemble/dispatch/deptList',
                showColumns: false,
                showExport: false,
                pageSize: 300,
                pagination: false,
                columns: [
                    {
                        title: '<input class="checkboxAll"  type="checkbox" onclick="selectedAll()" >', width: '40',
                        formatter: function (value, row, index) {
                            return '<input class="checkbox_select"  type="checkbox" name= "checkbox_select" ' +
                                'value= "' + $('<div/>').text(row.id).html() + '" id="' + $('<div/>').text(row.name).html() + '"    >';
                        }
                    },
                    {
                        title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index, field) {
                            return index + 1;
                        }
                    },
                    {title: "部门名称", field: 'name'}
                ]
            });
        }

        $("#btn-submit-CanYuRen1").click(function () {
            var branchIdList = $("#deptId").val();
            var branchIdListArray = branchIdList.split(",");
            $('input[name="checkbox_select"]:checkbox:checked').each(function (i, value, id) {
                var branchId = $(this).attr("value");
                var branchName = $(this).attr("id");
                for (let j = 0; j < branchIdListArray.length; j++) {
                    if (branchIdListArray[j] === branchId) {
                        js.modal.alert("请勿重复添加！");
                        return;
                    }
                }
                add(branchId, branchName);
            });
            js.modal.hide('modal-canYuRen-select');
        });
        /**重置复选框*/
        js.modal.hideEvent("modal-canYuRen-select", function () {
            js.reset("branchForm");
        });

        /** 生产令号下拉选 */
        js.select2({
            id: 'prodNo',
            placeholder: '',
            ajax: {
                url: function () {
                    return ctx + 'assemble/dispatch/prodOrdList'
                },
                processResults: function (data, page) {
                    let array = data;
                    for (let i = 0; i < data.length; i++) {
                        array[i]["id"] = array[i]['prodNo'];
                        array[i]["text"] = array[i]['prodNo'];
                    }
                    return {results: array};
                },
            }
        });
        /** 生产令下拉框选中 */
        $("#prodNo").on("select2:select", function () {
            $("#proCode").val($(this).select2("data")[0].prodProCod);
            $("#proName").val($(this).select2("data")[0].prodProName);
            $("#proNum").val($(this).select2("data")[0].prodNum);
            $("#proUnit").val($(this).select2("data")[0].unit);
            getPart();
        });

        /** 类型值改变，联动部分 */
        $("#special").change(function () {
            getPart();
        });

        /** 图号下拉框选中 */
        $("#drawNoSelect").on("select2:select",function(){
            let $this = $(this);
            if ($this.val()) {
                js.get({
                    url: ctx + 'assemble/dispatch/drawNo',
                    data: {
                        id: $this.val()
                    },
                    success: function (result) {
                        $("#drawNo").val(result.drawNo);
                        $("#drawName").val(result.drawName);
                        $("#drawNum").val(result.drawNum);
                        $("#h3-drawNo").text(result.drawNo);
                        $("#h3-drawName").text(result.drawName);
                    }
                });
            } else {
                emptyComp();
                $("#h3-drawNo").text('');
            }
        });

        /** 部分下拉框选中 */
        $("#partId").change(function () {
            emptyComp();
            let $this = $(this);
            js.get({
                url: ctx + 'assemble/dispatch/drawNoList',
                data: {
                    code : $("#proCode").val(),
                    partId : $this.val(),
                    special : $("#special").val(),
                    drawNo : ""
                },
                success: function (result) {
                    $("#drawNoSelect").empty().append(`<option value="">请选择</option>`);
                    result.forEach(value => {
                        if (value) {
                            $("#drawNoSelect").append(`<option value="${value.id}">${value.drawNo}</option>`);
                        }
                    });
                }
            })
        })

        /** 添加一行 */
        $("#sheetForm").on('click', '.sheet-add', function () {
            $(this).parents("tr").after(`
                    <tr class="mechanics">
                        <td>
                            ${routeHtml}
                        </td>
                        <td>
                            <input type="number" step="1" class="form-control" name="orderNo" autocomplete="off">
                        </td>
                        <td>
                            ${processHtml}
                        </td>
                        <td colspan="9">
                            <textarea class="form-control" name="comment" rows="1"></textarea>
                        </td>
                        <td>
                            <span class="sheet-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="sheet-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
            $(this).parents("tr").next().find("select[name=route]").val($(this).parents("tr").find("select[name=route]").val());
            $(this).parents("tr").next().find("input[name=orderNo]").val($(this).parents("tr").find("input[name=orderNo]").val());
        });
        /** 删除行 */
        $('#sheetForm').on('click', '.sheet-del', function () {
            $(this).parents("tr").remove();
            if ($("table tbody tr.mechanics").length === 0) {
                $("#card").append(`
                               <tr class="mechanics">
                                    <td>
                                        ${routeHtml}
                                    </td>
                                    <td>
                                        <input type="number" step="1" class="form-control" name="orderNo" autocomplete="off">
                                    </td>
                                    <td>
                                        ${processHtml}
                                    </td>
                                    <td colspan="9">
                                        <textarea class="form-control" name="comment" rows="1"></textarea>
                                    </td>
                                    <td>
                                        <span class="sheet-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                                        <span class="sheet-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                                    </td>
                                </tr>
                            `)
            }
        });

        /** 类型 */
        $('#special').change(function () {
            if ($('#special option:selected').val() == "自动化"){
                $(".automation").show();
                $(".mechanics").hide();
            } else {
                $(".automation").hide();
                $(".mechanics").show();
            }
        })

        /** 保存装配派工单 */
        $("#btn-save").click(function () {
            let $this = $(this);
            js.post({
                url: ctx + "verifyProStatus/isDesignByProdNO",
                data: {prodNo: $("#prodNo").select2('data')[0].prodProCod},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        debugger;
                        let res = js.vd({
                            id: 'sheetForm',
                            notEmpty: ['prodNo', 'proCode', 'partId', 'drawName', 'drawNum', 'createTel', 'special']
                        })
                        if (!res) {
                            return;
                        }
                        if (canYuCount <= 0) {
                            js.modal.warning("请添加至少一个部门！");
                            return;
                        }
                        /** 校验类型为机械、流体时，序号不为空 */
                        if ($('#special option:selected').val() != "自动化"){
                            let orderNoList = $("input[name='orderNo']");
                            for (let i = 0; i < orderNoList.length; i++) {
                                if ("" == orderNoList[i].value){
                                    js.modal.warning("序号不能为空！");
                                    return;
                                }
                            }
                        }

                        $this.attr('disabled', true);
                        js.submit({
                            formId: "sheetForm",
                            url: ctx + 'assemble/dispatch/save',
                            data: new FormData($("#sheetForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    location.href = ctx + "assemble/dispatch/subPage";
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    } else {
                        debugger;
                        let res = js.vd({
                            id: 'sheetForm',
                            notEmpty: ['prodNo', 'proCode', 'drawName', 'drawNum', 'createTel', 'special']
                        })
                        if (!res) {
                            return;
                        }
                        if (canYuCount <= 0) {
                            js.modal.warning("请添加至少一个部门！");
                            return;
                        }
                        /** 校验类型为机械、流体时，序号不为空 */
                        if ($('#special option:selected').val() != "自动化"){
                            let orderNoList = $("input[name='orderNo']");
                            for (let i = 0; i < orderNoList.length; i++) {
                                if ("" == orderNoList[i].value){
                                    js.modal.warning("序号不能为空！");
                                    return;
                                }
                            }
                        }

                        $this.attr('disabled', true);
                        js.submit({
                            formId: "sheetForm",
                            url: ctx + 'assemble/dispatch/save',
                            data: new FormData($("#sheetForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    location.href = ctx + "assemble/dispatch/subPage";
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    }
                }
            })




        });

    })

</script>
</body>
</html>
